<template>
  <div class="cc-exchange-box" @click="onItem">
    <div class="exchange-border">
      <div class="top">
        <img :src="item.pic" alt />
        <!-- <div class="tags">
          <div>30天</div>
          <div>热销</div>
        </div>-->
      </div>
      <div class="under">
        <el-tooltip :content="item.name" placement="top">
          <p>{{item.name}}</p>
        </el-tooltip>
        <div class="price-box">
          <span>价格：¥{{item.originalPrice}}</span>
          <!-- <span>利润：¥{{item.originalPrice - item.price}}</span> -->
         </div>
        <div class="count-box">剩余数量：{{item.stock}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'HostListItem',
    props: {
      item: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      onItem() {
        this.$router.push({
          path: '/hotlistsInfo',
          query: { id: this.item.id }
        });
      }
    },
    created() {}
  };
</script>
<style lang="scss" type="text/scss" scoped>
.cc-exchange-box {
  .exchange-border {
    border: 2px solid #e5e5e5;
    &:hover {
      border-color: white;
    }
    .top {
      position: relative;
      img {
        width: 100%;
        height: 150px;
      }
      .tags {
        position: absolute;
        top: 0;
        right: 0;
        div {
          color: white;
          font-size: 12px;
          background-color: blue;
          padding: 4px 8px;
          &:last-child {
            background-color: red;
            margin-top: 6px;
          }
        }
      }
    }
    .under {
      padding: 12px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p {
        margin-top: 0;
        @include line-elli();
      }
      .price-box {
        color: $c1;
        font-weight: 500;
        @include h-btw();
      }
      .count-box {
        margin-top: 8px;
        text-align: left;
        font-weight: 500;
      }
    }
  }
  border: 6px solid white;
  background: white;
  &:hover {
    cursor: pointer;
    border: 6px solid $c1;
  }
}
</style>
